<template>
  <div class="home">
      <div id="nav">
        山西林院疫情防控管理系统
      </div>
      <div id="content">
        <img src="../assets/bg.jpg" alt="" id='bg'>
        <div class='msg' id='top'>
          <img src="../assets/msg.png" alt="" id='msg'>
          <span>  
            应疫情防控要求，请出入社区人员进行健康登记。个人信息不会对外泄露，请如实填写。
          </span>
        </div>
        <div class='msg' id='bottom'>
          <div id='routernav'>
            <router-link  to='/user'>
              <div id='one'>
                <img src="../assets/员工.png" alt="">
                <font>
                    我是员工
                </font>
              </div> 
            
            </router-link>

             <router-link  to='/fangke'>
                <div id='second'>
                  <img src="../assets/访客.png" alt="">
                  <font>
                      我是访客       
                  </font>
                </div>
            </router-link>
          
            <router-link to='/knowledge'>
              <div id='third'>
                  <img src="../assets/防疫.png" alt="">
                  <font>
                    防疫知识
                  </font>    
              </div>
            </router-link>
            
            <router-link  to='/server'>
                <div id='four'>
                <img src="../assets/服务.png" alt="">
                <font>
                  便民服务
                </font>
              </div>
            </router-link>
          
          </div>
        </div>
      </div>
  </div>
</template>
<style scoped>
  #nav{
    width:100%;
    padding: 1rem 0;
    text-align: center;
    color: white;
    position: fixed;
    top: 0;
    font-size: 1rem;
  }

  #content img#bg{
    width: 100%;
  }
  .msg{
    border: 1px solid rgb(124,170,188);
  }
  #top{
    width: 80%;
    padding: 0.3rem 0.5rem;
    margin:auto;
    position: relative;
    top: -3.3rem;
    z-index: 1;
    color: black;
    font-size: 0.6rem;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  #top #msg{
    width: 1.2rem;
    margin: 0.3rem;
  }
  #bottom{
    width: 90%;
    margin: auto;
    position: relative;
    top: -4.3rem;
  }
  #routernav{
    width: 100%;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
  }
  #routernav div{
    width: 6rem;
    height: 4rem;
    margin: 0.7rem 0;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  #routernav div img{
    width: 100%;
    margin: auto;
  }
</style>
<script>
export default {
  name: 'Home'
}
</script>
